@import '../../../../../business/style/main.less';
@import '../../../../../business/style/styles/component.less';
@import '../../../../../business/style/styles/mainForm.less';
@import '../../../../../business/style/styles/report.less';

@centerMargin: -50%;
@pictureScaleNum: 1.05;
@pictureScaleTime: 5s;
@picturePaddingTop: 60%;
@projectWidth: 20%;
@projectMarginBottom: 1.25%;
@conditionScaleTime: .5s;
@projectListScaleTime: 2s;

.service-project-img {
    max-width: var(--legendDlhTop);
    max-width: var(--nhMainFormHeight);
    // float: var(--videoTitleContentTextAlign);
}

.service-project-img>img {
    max-width: var(--rowTableHeight);
    width: var(--restHeight);
    // height: ;
}

.service-project-info {
    // padding: var(--reportTitleBorderImagePadding);
    // float: var(--videoTitleContentTextAlign);
}

.service-project-buy {
    margin: var(--blankMainFormForNhAllViewPadding);
    padding: var(--blankMainFormForNhAllViewPadding);
    background: var(--deepBackgroundTextColor);
    border-radius: var(--amTagBorderRadius);
    display: flex;
    flex-wrap: wrap;

    .service-project-buyctn {
        display: flex;
        justify-content: center;
        flex: var(--noMargins) var(--layout) var(--headerLeftWidth);
        margin: var(--headerRrightNoneMarginTop);
    }

    h4 {
        display: flex;
        align-items: center;
        padding-right: var(--ntFormCreatorMarginLeft);
        height: var(--detailMain);
        line-height: var(--detailMain);
    }

    .header-list {
        border: var(--headMainFormHeadBorderBottom);
        margin-bottom: var(--reportTitleBorderImageLineHeight);
        display: flex;
        flex-direction: wrap;

        .header-subtitle {
            padding: var(--echartsForReactMarginBottom);
            background: var(--auxiliaryTextColor);
            display: inline-block;
            height: var(--detailMain);
            display: flex;
            align-items: center;
            color: var(--amTagColor);
        }

        .header-condition {
            padding: var(--echartsForReactMarginBottom);
            cursor: pointer;
            display: inline-block;
            height: var(--detailMain);
            display: flex;
            align-items: center;

            &:hover {
                transition: @conditionScaleTime;
                background: var(--themeColor2);
                color: var(--amTagColor);
            }
        }

        .active {
            background: var(--themeColor2);
            color: var(--amTagColor);
        }
    }


    .list-content {
        margin-bottom: var(--unmRowMarginBottom);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        margin-left: var(--noMargins);
        margin-right: var(--noMargins);
        width: var(--completelyFill);

        &:before {
            display: none;
        }

        &:after {
            // content: "";
            // flex: auto;
            display: none;
        }

        .projectlist {
            cursor: pointer;
            margin-bottom: @projectMarginBottom;
            // box-shadow: 0 0 var(--textButton) var(--dividingLine);
            width: @projectWidth  !important;

            .project-section {
                transition: @projectListScaleTime;

                .picture {
                    max-width: var(--rowTableHeight);
                    margin-bottom: var(--textButton);
                    width: var(--completelyFill);
                    position: relative;
                    height: var(--noMargins);
                    padding-top: @picturePaddingTop;
                    overflow: hidden;

                    img {
                        width: var(--completelyFill);
                        height: var(--completelyFill);
                        display: block;
                        object-fit: cover;
                        transition: @pictureScaleTime;
                        position: absolute;
                        top: var(--legendDlhTop);
                        left: var(--legendDlhTop);
                        transform: translate3d(@centerMargin, @centerMargin, var(--noMargins));
                        transform-origin: center;
                        will-change: transform;
                    }

                }

                .detail {
                    padding: 0 var(--amTagBorderRadius);

                    .projectinfo,
                    .projectinfotitle {
                        margin: var(--resColPadding);
                    }
                }
            }

            &:hover {
                .project-section {
                    box-shadow: 0 0 var(--textButton) var(--dividingLine);

                    .picture img {
                        transform: scale(@pictureScaleNum) translate3d(@centerMargin, @centerMargin, 0);
                        ;
                    }

                }
            }
        }

    }

    .ant-pagination {
        width: var(--rowContentTableWidth);
        text-align: center;
    }
}

.product-info-ctn {
    padding: var(--backstageManagemainFormLayourHeaderTwoPadding);
    width: var(--backstageManagemainFormLayourContentMixWidth);
    margin: var(--squareInfoMarginRight) auto 0;
    background: var(--ntBubbleColor);
    border-radius: var(--amTagBorderRadius);

    .product-details {
        display: inline-block;

        &:after {
            content: "";
            display: inline-block;
            clear: both;
        }
    }
}

.ant-card.service-project-buy-card {
    margin: var(--blankMainFormForNhAllViewPadding);
    border-radius: var(--amTagBorderRadius);

    .service-project-buy-pic {
        width: var(--serviceImgWidth);
        height: var(--serviceImagHeight);
        display: block;

        img {
            object-fit: cover;
            display: block;
            height: var(--completelyFill);
            width: var(--completelyFill);
        }
    }

    .ant-table-pagination {
        display: none !important;
    }

    .service-project-buy-btm {
        text-align: right;
        margin-top: var(--largeMargin);
        display: flex;
        justify-content: space-between;

        .service-project-buy-prize {
            font-size: var(--mainFontSize);
            margin-right: var(--amTagFontSize);
        }
    }
}

ul,
li {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

.productinfo2>ul>li {
    display: flex;
    flex-wrap: wrap;
    margin: var(--stateRowPadding);
}

.product-comment {
    padding-top: var(--loginFormItenHeight);
    padding-bottom: var(--countDownRight);
}

.shopping-ipt {
    margin-right: var(--amTagRight);
}

.service-name {
    display: inline-block;
    width: var(--detailMargin);
    margin-right: var(--headMainFormLogoContentFontSize);
}

.product-imgs {
    width: var(--minHeight400);
    float: var(--videoTitleContentTextAlign);
    flex-shrink: 0;
    padding-bottom: var(--headMainFormLogoContentHeight);
}

.product-imgs .ant-carousel .slick-slider .slick-dots {
    bottom: var(--bigBubbleWithFourChildrenTop);
}

.product-imgs .ant-carousel .slick-slider .slick-dots li button {
    height: var(--countDownTop);
    width: var(--squareInfoMarginRight);
    background-color: var(--commonContainBackground);
}

.project-info {
    flex-grow: var(--videoTitleZindex);
    padding: var(--rowContentTableBorder) var(--headerLeftTop);
    float: var(--videoTitleContentTextAlign);
}

.project-info>p {
    vertical-align: middle;
    color: #000;
    font-weight: var(--numStyleFontWeight);
    margin-bottom: var(--countDownTop);
}

// .project-info>span {
//   vertical-align: middle;
//   color: #000;
//   font-weight: var(--numStyleFontWeight);
//   margin-bottom: var(--countDownTop);
// }
.pricebox {
    display: flex;
    align-items: center;
    padding: var(--countDownRight);
    background-color: rgb(165, 201, 241);
    height: var(--serviceImgWidth);
    margin: var(--reportTitleBorderImage) var(--backstageManagemainFormLayourViewPadding);
}

.pricebox>p {
    margin-bottom: var(--backstageManagemainFormLayourViewPadding);
}

.pricebox>p>i {
    font-style: normal;
    font-size: var(--chartWidgetBorderBgTop);
    color: rgb(42, 107, 230);
}

.product-imgbox img {
    max-width: var(--rowTableHeight);
    min-height: var(--minHeight400);
    object-fit: cover;
    display: block;
}

.org_address {
    font-style: normal;
}

.avtive>span {
    float: right;
    display: inline-block;
}

.avtive>img {
    width: var(--countdownInputBorderRadius);
    height: var(--countdownInputBorderRadius);
    float: var(--videoTitleContentTextAlign);
    margin-right: var(--reportTitleBorderImageLineHeight);
}

.comment-list {
    margin-top: var(--unmRowMarginBottom);
}

.shopping-cart svg {
    float: right;
    // display: inline-block;
    width: var(--headerLeftNoneHeight);
    height: var(--headerLeftNoneHeight);
    // padding-top: 20px;
}

.shopping-cart {
    float: right;
    // width: 40px;
    // height: 40px;
    // padding-top: 20px;
}